import {
  Image,
  ImageBackground,
  StatusBar,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  TouchableWithoutFeedback,
  View,
} from "react-native";

import Icon from "react-native-vector-icons/AntDesign";
import { SafeAreaView } from "react-native-safe-area-context";
import { LoginScreenProps } from "../../types/NavigationTypes";
const LoginScreen: React.FC<LoginScreenProps> = ({ navigation }) => {
  return (
    <>
      <StatusBar
        barStyle="light-content"
        backgroundColor="transparent"
        translucent={true}
      />
      <ImageBackground
        style={{ flex: 1 }}
        source={require("../../../assets/images/Login_BKG.jpg")}
      >
        <SafeAreaView style={{ flex: 1 }}>
          <View style={{ flexDirection: "row" }}>
            <TouchableWithoutFeedback
              onPress={() => {
                navigation.goBack();
              }}
            >
              <Icon style={styles.close} name="close" size={26} color="white" />
            </TouchableWithoutFeedback>
            <TouchableWithoutFeedback onPress={() => {}}>
              <Text style={styles.findPwd}>找回密码</Text>
            </TouchableWithoutFeedback>
          </View>

          <View style={{ alignItems: "center" }}>
            <Image
              style={styles.logo}
              source={require("../../../assets/images/icon_eye_loading.png")}
            />
            <Text numberOfLines={2} style={styles.loginDesc}>
              {"登录后即可关注作者，\n发布评论，同步喜欢视频和播放记录"}
            </Text>
          </View>

          <View style={{ height: 45, marginTop: 50 }}>
            <View style={{ flex: 1, flexDirection: "row" }}>
              <Icon
                style={{ marginLeft: 30, marginTop: 15 }}
                name="user"
                size={20}
                color="white"
              />
              <TextInput
                style={styles.input}
                clearButtonMode="while-editing"
                selectionColor="white"
                autoCapitalize="none"
                underlineColorAndroid={"transparent"}
                placeholder={"请输入邮箱地址/手机号"}
                placeholderTextColor={"#ffffff9f"}
              />
            </View>
            <View style={styles.divide}></View>
          </View>

          <View style={{ height: 45 }}>
            <View style={{ flex: 1, flexDirection: "row" }}>
              <Icon
                style={{ marginLeft: 30, marginTop: 15 }}
                name="lock"
                size={20}
                color="white"
              />
              <TextInput
                style={styles.input}
                clearButtonMode="while-editing"
                selectionColor="white"
                secureTextEntry={true}
                spellCheck={false}
                underlineColorAndroid={"transparent"}
                placeholder={"请输入密码"}
                placeholderTextColor={"#ffffff9f"}
              />
            </View>
            <View style={styles.divide}></View>
          </View>

          <TouchableOpacity style={styles.loginButton}>
            <Text style={styles.buttonText}>登录</Text>
          </TouchableOpacity>

          <View style={styles.loggedIn}>
            <Text style={{ color: "white", marginRight: 60 }}>
              {"用户注册"}
            </Text>
            <Text style={{ color: "white" }}>{"作者登录"}</Text>
          </View>

          <View style={styles.loginType}>
            <Image
              style={styles.loginWeibo}
              source={require("../../../assets/images/icon_login_wb44x44.png")}
            />
            <Image
              style={styles.loginWeibo}
              source={require("../../../assets/images/icon_login_wx44x44.png")}
            />
            <Image
              style={styles.loginQQ}
              source={require("../../../assets/images/icon_login_qq44x44.png")}
            />
          </View>

          <View style={styles.serviceAgreementView}>
            <Text style={styles.agreementText1}>{"登录或注册即同意开眼"}</Text>
            <Text style={styles.agreementText2}>{"用户服务协议"}</Text>
          </View>
        </SafeAreaView>
      </ImageBackground>
    </>
  );
};

const styles = StyleSheet.create({
  close: {
    flex: 1,
    marginLeft: 20,
    marginTop: 5,
  },
  findPwd: {
    justifyContent: "flex-end",
    marginRight: 20,
    marginTop: 10,
    fontSize: 14,
    color: "white",
  },
  logo: {
    resizeMode: "contain",
    width: 150,
    height: 60,
    marginTop: 50,
  },
  loginDesc: {
    marginLeft: 80,
    marginRight: 80,
    marginTop: 30,
    fontSize: 13,
    textAlign: "center",
    color: "white",
  },
  input: {
    flex: 1,
    marginLeft: 10,
    marginRight: 50,
    color: "white",
    fontSize: 14,
  },
  divide: {
    marginLeft: 60,
    marginRight: 60,
    height: 0.5,
    backgroundColor: "white",
  },
  loginButton: {
    height: 40,
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 8,
    backgroundColor: "#FFF",
    marginTop: 40,
    marginLeft: 50,
    marginRight: 50,
  },
  buttonText: {
    color: "#000",
    fontSize: 17,
  },
  loggedIn: {
    flexDirection: "row",
    justifyContent: "center",
    marginTop: 30,
  },
  loginType: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "center",
    marginTop: 35,
  },
  loginWeibo: {
    width: 45,
    height: 45,
    marginRight: 40,
  },
  loginQQ: {
    width: 45,
    height: 45,
  },
  serviceAgreementView: {
    flexDirection: "row",
    justifyContent: "center",
    marginBottom: 10,
    height: 50,
  },
  agreementText1: {
    marginTop: 18,
    color: "gray",
  },
  agreementText2: {
    marginLeft: 5,
    marginTop: 18,
    color: "white",
  },
});

export default LoginScreen;
